<template>
	<view class="page">
		<u-navbar autoBack fixed placeholder leftIconColor="#232832" bgColor="#FFFFFF"
			titleStyle="color: #232832"></u-navbar>
		<view class="content" :style="{top: `${statusBarHeight + 44}px`, bottom: `${safeAreaBottom}px`}">
			<view v-if="type != '2'">
				<editor class="editor" placeholder="开始创作吧" @input="editorInput" @ready="editorReady"></editor>
				<u-gap height="1px" bgColor="#F4F4F7"></u-gap>
				<view class="images" v-if="type == '0'">
					<view class="image-item" :style="[style]" v-for="img in imgList" :key="img" @longtap="longTap(i)"
						@click="previewImg(i)">
						<image :src="img"></image>
					</view>
					<view class="upload" :style="[style]" @click="upload()" v-if="imgList.length < 9">
						<u-icon name="plus" :size="16" bold color="#D1D1D6"></u-icon>
					</view>
				</view>
				<view class="video" v-else-if="type == '1'">
					<video :src="videoSrc" v-if="false"></video>
					<u-icon name="plus" :size="16" bold color="#D1D1D6" @click="upload()"></u-icon>
				</view>
				<u-gap height="1px" bgColor="#F4F4F7"></u-gap>
				<view class="cell">
					<view class="cell-label">
						<text class="tag">#</text>
						<text class="label">添加标签</text>
					</view>
					<view class="cell-value">
						<text class="value" @click="show = true;">{{ tag }}</text>
						<u-icon name="arrow-right" bold :size="20"></u-icon>
					</view>
				</view>
			</view>
			<view class="topic" v-if="type == '2'">
				<view class="form">
					<view class="form-item">
						<u-input placeholder="话题(20个字符以内)" maxlength="20" border="none"
							placeholderStyle="font-size: 15px;line-height: 18px;font-weight: 400;"></u-input>
					</view>
					<u-gap height="1px" bgColor="#F4F4F7"></u-gap>
					<view class="form-item">
						<textarea placeholder="简单描述一下这个话题吧(40个字符以内)" maxlength="40"
							placeholderStyle="font-size: 12px;line-height: 14px;font-weight: 400;"
							:show-confirm-bar="false"></textarea>
					</view>
					<u-gap height="1px" bgColor="#F4F4F7"></u-gap>
					<view class="label">话题封面</view>
					<view class="topic-upload" :style="{ height: `${topicImgHeight}px`}">
						<image src="" v-if="false"></image>
						<u-icon name="plus" :size="16" bold color="#D1D1D6"></u-icon>
					</view>
				</view>
			</view>
			<view class="placeholder-bar-bottom"></view>
		</view>

		<view class="btn" :style="{ paddingBottom: `${safeAreaBottom > 0 ? safeAreaBottom : 10}px` }">
			<view class="save">
				<view class="save-icon">
					<text class="icon-draft"></text>
				</view>
				<view class="save-label">保存草稿</view>
			</view>
			<view class="submit">发布</view>
		</view>

		<u-popup :show="show" mode="bottom" closeable @close="show = false;" :round="20" bgColor="#FFFFFF">
			<view class="placeholer" style="height: 50px;"></view>
			<view class="topic-content" v-if="topic.length > 0">
				<view class="topic-cell" v-for="(t, index) in topic" :key="index" @click="selectTopic(t)">
					<view class="topic-cell__body">
						<view class="topic-cell__title">{{ t.title }}</view>
						<view class="topic-cell__label">{{ t.label }}</view>
					</view>
					<view class="topic-cell__value">
						<u-icon name="arrow-right" color="#232832" :size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="topic-content" v-else>
				<u-empty icon="/static/no_topic.png" text="还没有话题~" :marginTop="50" :width="200">
					<view class="publish-btn" @click="goTopic()">点我去发布</view>
				</u-empty>
			</view>
		</u-popup>

		<u-modal :show="modal" title="系统提示" content="此操作将导致数据丢失，是否返回" showCancelButton confirmColor="#232832"
			cancelColor="#6E86FF" @confirm="goBack()" @cancel="modal = false;"></u-modal>
	</view>
</template>

<script>
	import mixins from '@/mixins/index.js'
	export default {
		mixins: [mixins],
		data() {
			return {
				tag: '选择合适的话题',
				show: false,
				topic: [],
				type: '0',
				imgList: [],
				videoSrc: '',
				modal: false,
				notBack: true
			}
		},
		computed: {
			style() {
				const imgSize = ((uni.getSystemInfoSync().screenWidth - 44 - 30) / 3).toFixed(2)
				return {
					width: imgSize + 'px',
					height: imgSize + 'px'
				}
			},
			topicImgHeight() {
				return ((uni.getSystemInfoSync().windowWidth - 44) / (351 / 170)).toFixed(2)
			},
		},
		methods: {
			editorReady() {
				if (this.type == '2') {
					return
				}
				uni.createSelectorQuery().in(this).select('.editor').context(res => {
					this.editorCtx = res.context
					this.notBack = false
				}).exec()
			},
			longTap(index) {
				uni.showActionSheet({
					title: '删除图片',
					alertText: '删除图片',
					itemList: ['删除'],
					itemColor: '#FF2A43',
					success: ({
						tapIndex
					}) => {
						if (tapIndex == 0) {
							this.imgList.splice(index, 1)
						}
					}
				})
			},
			previewImg(i) {
				console.log(i);

			},
			upload() {
				if (this.type == '0') {
					// #ifdef APP
					uni.chooseImage({
						count: 9,
						sourceType: ['alumb', 'camera'],
						sizeType: ['compressed'],
						success: ({
							tempFilePaths,
							tempFiles
						}) => {
							console.log(tempFilePaths);
							console.log(tempFiles);
							tempFilePaths.forEach(tempFilePath => {
								this.imgList.push(tempFilePath)
							})
							// this.$request.uploadFile(tempFiles[0], 'image').then(res => {
							// 	console.log(res);
							// })
						},
						fail: (err) => {
							console.log('err: ', err);
							uni.toast.show({
								title: '未授权'
							})
						}
					})
					// #endif
					// #ifdef MP-WEIXIN
					uni.chooseMedia({
						count: '9',
						mediaType: ['image'],
						sourceType: ['alumb', 'camera'],
						sizeType: ['compressed'],
						success: ({
							tempFiles,
							type
						}) => {
							console.log(tempFiles);
							console.log(type);
							tempFiles.forEach(tempFile => {
								this.imgList.push(tempFile.tempFilePath)
							})
						},
						fail: (err) => {
							console.log(1, err);
							if (err.errno === 112) {
								uni.getAppAuthorizeSetting({
									complete: (rs) => {
										console.log(rs);
									}
								})
							}
						}
					})
					// #endif
				} else {
					uni.chooseVideo({
						compressed: true,
						success: (rs) => {
							console.log(rs);
							this.videoSrc = rs.tempFilePath
						},
						fail: (err) => {
							console.log(err);
						}
					})
				}
			},
			selectTopic(topic) {
				this.tag = topic.title
				this.show = false
			},
			editorInput({ detail }) {
				if(this.imgList.length > 0 || this.topic.length > 0 || detail.text != '\n') {
					this.notBack = true
				}else {
					this.notBack = false
				}
			},
			goBack() {
				this.notBack = false
				uni.navigateBack()
			},
			goTopic() {
				uni.navigateTo({
					url: '/pages/common/publish?type=2'
				})
			}
		},
		onLoad(options) {
			this.type = options.type
			if (options.item) {

			}
		},
		onBackPress() {
			if(this.notBack) {
				this.modal = true
			}
			return this.notBack
		}
	}
</script>

<style scoped lang="scss">
	.content {
		position: fixed;
		left: 0;
		right: 0;
		background-color: #FFFFFF;
		padding: 10px 22px 60px;
		overflow-y: auto;
	}

	.editor {
		margin: 20px 0;
		color: #232832;
		font-size: 15px;
		line-height: 18px;
		font-weight: 500;

		&::before {
			color: #232832;
		}
	}

	.images {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		margin: 20px 0;

		.image-item {
			position: relative;
			border-radius: 8px;
			margin: 5px;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: inherit;
		}

		.upload {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 5px;
			box-sizing: border-box;
			border: 1px dashed #D1D1D6;
			border-radius: 10px;
		}
	}

	.video {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 140px;
		border-radius: 10px;
		border: 1px dashed #D1D1D6;
		margin: 20px 0;
	}

	.topic {


		.form {}

		.form-item {
			margin: 20px 0;
		}

		textarea {
			color: #232832;
			font-size: 12px;
			line-height: 14px;
			font-weight: 400;
		}

		.label {
			margin: 10px 0;
			color: #232832;
			font-size: 15px;
			line-height: 18px;
			font-weight: 400;
		}

		.topic-upload {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			border-radius: 10px;
			border: 1px dashed #D1D1D6;
			margin: 20px 0;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
		}
	}

	.cell {
		display: flex;
		align-items: center;
		padding: 10px 0;
		margin: 10px 0;

		&>view {
			display: flex;
			align-items: center;
		}

		.cell-label {
			flex: 0 0 108px;
			justify-content: flex-start;
		}

		.cell-value {
			width: 100%;
			justify-content: flex-end;
		}

		.tag {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 16px;
			height: 16px;
			border-radius: 50%;
			background-color: #787B86;
			color: #FFFFFF;
			font-size: 10px;
			line-height: 12px;
			font-weight: 400;
		}

		.label {
			margin-left: 6px;
			color: #232832;
			font-size: 15px;
			line-height: 18px;
			font-weight: 400;
		}

		.value {
			background-color: #F4F4F7;
			padding: 8px 14px;
			border-radius: 21px;
			margin-right: 15px;
			color: #232832;
			font-size: 12px;
			line-height: 14px;
			font-weight: 400;
		}
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 10px 22px 0;
		background-color: #FFFFFF;
		border-top: 1px solid #F5F5F5;

		.save {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			margin-right: 26px;

			.save-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				background-color: #F4F4F7;
				color: #787B86;
			}

			.save-label {
				margin-top: 5px;
				color: #787B86;
				font-size: 10px;
				line-height: 12px;
				font-weight: 400;
				white-space: nowrap;
			}
		}

		.submit {
			width: 100%;
			padding: 12px 0;
			border-radius: 23px;
			background-color: #6E86FF;
			color: #FFFFFF;
			font-size: 15px;
			line-height: 18px;
			font-weight: 400;
			text-align: center;
		}
	}

	.topic-content {
		height: 65vh;
		overflow-y: auto;

		.topic-cell {
			display: flex;
			align-items: center;
			margin: 18px 22px;

			&__body {
				flex: 1;
			}

			&__title {
				color: #232832;
				font-size: 15px;
				line-height: 18px;
				font-weight: 500;
			}

			&__label {
				margin-top: 6px;
				color: #B9BCC3;
				font-size: 10px;
				line-height: 12px;
				font-weight: 400;
			}
		}
		
		.publish-btn {
			width: 84px;
			padding: 8px 18px;
			background-color: #6E86FF;
			border-radius: 20px;
			margin-top: 30px;
			color: #FFFFFF;
			font-size: 12px;
			text-align: center;
		}
	}
</style>